<template>
  <div class="search-box" :style="{height:cardHeight+'px'}">
    <el-row>
      <div
        class="search-box-body"
        :style="{position:cardPosition,padding:(cardHeight-40)/2+'px 0'}"
      >
        <el-col :span="20" :offset="1">
          <el-input placeholder="请输入关键字">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="1" :offset="1">
          <el-button icon="el-icon-close" circle @click="handleCloseButton"></el-button>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardPosition: 'static'
    }
  },
  methods: {
    handleCloseButton() {
      this.$emit('toHandleCloseButton')
    }
  },
  watch: {
    // 优化动画体验
    cardHeight: function() {
      var time = 0
      this.cardHeight > 0 ? (time = 300) : (time = 0)
      setTimeout(() => {
        this.cardHeight > 0
          ? (this.cardPosition = 'fixed')
          : (this.cardPosition = 'static')
      }, time)
    }
  },
  props: ['cardHeight']
}
</script>

<style lang="less" scope>
.search-box {
  overflow: hidden;
  transition: all ease-in 0.3s;
  .el-row {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .search-box-body {
    width: 100%;
    z-index: 999;
    background-color: #fff;
  }
}
</style>
